<!--培养方案执行-->
<template>
  <div class="wrapper-container">
    <div class="search-container"  style="margin:0;padding-left:0">
      <div class="my-form-item-label" id="searchLabel">
        年度:
      <span class="mustW" style="color:red;margin-right:10px">*</span>
      </div>
      <el-select v-model="grade" placeholder="请选择" @change="changeGrade" size="mini" style="width:110px;margin-right: 15px;" clearable @clear="reqCheckPlan">
        <el-option
          v-for="(item,index) in xqList"
          :key="index"
          :label="item.xqszxn"
          :value="item.xqszxn"
        >
        </el-option>
      </el-select>
      <div class="my-form-item-label" id="searchLabel" style="margin-right:10px">
        培养层次:
      <!-- <span class="mustW" style="color:red;margin-right:10px">*</span> -->
      </div>
      <el-select v-model="traininglevel" placeholder="请选择" @change="changeLevel" size="mini" style="width:110px;margin-right: 15px;" clearable>
        <el-option
          v-for="(item,index) in pyccList"
          :key="index"
          :label="item.dictValue"
          :value="item.dictKey"
        >
        </el-option>
      </el-select>
      <!-- <SelectItem
        :name="'年度'"
        :value="grade"
        @change="
          (e) => {
            grade = e;
          }
        "
        :xqList="xqList"
      ></SelectItem> -->
      <!-- <SelectItem
        :name="'培养层次'"
        :value="traininglevel"
        @change="
          (e) => {
            traininglevel = e;
          }
        "
        :xqList="pyccList"
      ></SelectItem> -->
      <!-- <el-button type="primary" icon="el-icon-search" @click="reqCheckPlanList" size="mini">查询</el-button> -->
      <div class="search-button" style="margin: 3px 20px 0 5px;" @click="reqCheckPlanList">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <!-- <el-button
        type="success"
        @click="plyypyfa"
        size="mini"
        icon="el-icon-link"
      >
        <span>批量引用培养方案</span>
      </el-button> -->
      <div
        class="cjrc-button"
        @click="plyypyfa"
        style="width: 180px; margin-left: 10px;line-height: 28px;margin: 3px 20px 0 0;"
      >
        <!-- <img src="@/assets/assessment/iconaddd.png" alt="" /> -->
        <span>批量引用培养方案</span>
      </div>
    </div>
    <div class="table-container" style="position:relative">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              icon="el-icon-link"
              type="success"
              @click="importUser(scope)"
              size="mini"
            >
              <span>引用</span>
            </el-button> -->
            <button class="yy" @click="importUser(scope)">
              <img style="width:14px;height:14px;position: relative;top: 2px;" src="../../../assets/assessment/引用(1).png" />
              <span style="margin-left:5px">引用</span>
            </button>
          </template>
        </el-table-column>
        <el-table-column label="专业【层次】" align="center" prop="specialtyName">
          <template slot-scope="scope">
            {{ scope.row.specialtyName == '' && scope.row.trainingLevelname == '' ?  '' : scope.row.specialtyName }}【{{ scope.row.trainingLevelname }}】
          </template>
        </el-table-column>
        <el-table-column prop="standardEduSystem" label="学制" align="center">
        </el-table-column>
        <el-table-column
          prop="pyfnDetails"
          label="培养方案【版本】"
          align="center"
        >
          <template slot-scope="scope">
            <button class="xq" @click="changeTable(scope.row)">
              <!-- <img src="../../../assets/assessment//引用(1).png" /> -->
              {{scope.row.pyfnDetails}}
            </button>
          </template>
        </el-table-column>
        <el-table-column
          prop="edzxf"
          label="额定总学分"
          align="center"
        >
        </el-table-column>
      </el-table>
      
    <div class="block" style="margin-bottom:50px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="width:auto;margin-top: 15px;float:right;margin-bottom:50px;padding:0"
      >
      </el-pagination>
    </div>
    </div>
    <el-dialog
      title="引用培养方案"
      :visible.sync="showManualEntryDialog"
      width="50%"
      class="manual-entry-container"
    >
      <div class="assessment-edit-plan-container">
        <div class="my-form-container" style="width: 95%; height: auto">
          <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item class="my-form-item" prop="collegeCode">
              <div class="my-form-item-label">
                专业编号
              </div>
              <!-- <el-input class="my-form-item-value" v-model="importSin.zybh" readonly></el-input> -->
              <span class="diaInfo">{{importSin.collegeCode}}</span>
            </el-form-item>
            <el-form-item class="my-form-item" prop="specialtyName">
              <div
                class="my-form-item-label"
              >
                专业名称
              </div>
              <!-- <el-input class="my-form-item-value"  v-model="importSin.specialtyName" readonly></el-input> -->
              <span class="diaInfo">{{importSin.specialtyName}}</span>
            </el-form-item>
            <el-form-item class="my-form-item" prop="standardEduSystem">
              <div class="my-form-item-label">
                学制
              </div>
              <!-- <el-input class="my-form-item-value"  v-model="importSin.standardEduSystem" readonly></el-input> -->
              <span class="diaInfo">{{importSin.standardEduSystem}}</span>
            </el-form-item>
            <el-form-item class="my-form-item" prop="trainingLevelname">
              <div class="my-form-item-label">
                适用层次
              </div>
              <!-- <el-input class="my-form-item-value"  v-model="importSin.trainingLevelname" readonly></el-input> -->
              <span class="diaInfo">{{importSin.trainingLevelname}}</span>
            </el-form-item>
            <el-form-item class="my-form-item" prop="pyfaName">
              <div class="my-form-item-label">培养方案（版本）</div>
                <el-select v-model="pyfaName" placeholder="请选择" style="margin-left:38px;margin-top:10px;width:260px" @change="selChangeSin" clearable>
                <el-option
                  v-for="(item,index) in pyfaList"
                  :key="index"
                  :label="item.mc"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <!-- <el-row class="my-form-item">
            <el-col :span="12">
              <div class="my-form-item-label">专业编号</div>
              <div class="my-form-item-value">001</div>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="12">
              <div class="my-form-item-label">专业名称</div>
              <div class="my-form-item-value">英语名称</div>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="12">
              <div class="my-form-item-label">学 制</div>
              <div class="my-form-item-value">三年</div>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="12">
              <div class="my-form-item-label">适用层次</div>
              <div class="my-form-item-value">专科</div>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="30">
            </el-col>
          </el-row> -->
        </div>
        <div class="button-group">
          <div @click="submitSave">
            <div>保 存</div>
          </div>
          <div @click="cancelClose">
            <div>取 消</div>
          </div>
        </div>
        <!-- <span
          slot="footer"
          class="dialog-footer"
          style="width: 210px; margin: 0 auto; display: block"
        >
        <el-button type="success" @click="submitSave">保 存</el-button>
        <el-button type="danger" @click="cancelClose" style="margin-left:60px">取 消</el-button>
        </span> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import Subscript from "../../../components/Subscript.vue";
import { reqCheckPlanList,reqCheckYearList,reqCheckLevelList,reqUsePlan,reqUpdatePlan } from "@/api/admin1/check";
import { getConditionList,termView } from "@/api/propositionReview/approval";

export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
    Subscript,
  },
  data() {
    return {
      current:1,
      size:10,
      pageNo: 1,
      pageSize: 10,
      bb:"",
      pyfafl: "",
      pyfaName:"",
      pyfaId:"",
      pyfaList:[],
      importSin:{},
      cc:'',
      total:'',
      showManualEntryDialog: false,
      checked: false,
      teachingfaculty: "",
      planid: "",
      grade: "",
      xqList: [],
      pc: "第一批",
      pcList: [],
      designcontent: "",
      unitList: [],
      itemType: ["value1"],
      itemTypeList: [
        {
          value: "value1",
          label: "课下作业",
        },
        {
          value: "value2",
          label: "课堂测评",
        },
        {
          value: "value3",
          label: "期中考试",
        },
        {
          value: "value4",
          label: "课终考核",
        },
      ],
      itemTypeObject: {
        value1: "课下作业",
        value2: "课堂测评",
        value3: "期中考试",
        value4: "课终考核",
      },
      traininglevel: "",
      pyccList: [],
      studytype: "",
      typeList: [],
      coursename: "",
      tableData: [],
      multipleSelection: [],
    };
  },
  mounted() {
    this.reqCheckYearList();
    this.reqCheckLevelList();
    this.reqCheckList();
  },
  computed: {
    itemTypeLoop() {
      return this.itemType.sort();
      //期中考试（已录/已审
      // qzreview ;
    },
  },
  methods: {
    changeTable(row){
      this.$router.push({
        path: "/admin/training/details", //要跳转的页面的路由
      });
      localStorage.setItem("detaisPyfaid",row.pyfaid);
    },
    //获取年度下拉框
    reqCheckYearList(){
      let that = this;
      reqCheckYearList().then(res => {
        if(res.data.code == 200 && res.data.data){
          that.xqList = res.data.data;
          // that.grade = res.data.data[0].xqszxn;
        }
      });
    },
    //获取培养层次下拉框
    reqCheckLevelList(){
      let that = this;
      reqCheckLevelList().then(res => {
        if(res.data.code == 200 && res.data.data){
          that.pyccList = res.data.data[0].children;
          // that.traininglevel = res.data.data[0].children[0].dictValue;
        }
      });
    },
    changeGrade(index){
      this.grade = index;
    },
    changeLevel(index){
      this.cc = index;
    },
    //  按条件查询
    /* queryscore() {
      let obj = {
        grade: this.grade,
        designcontent: this.designcontent,
        traininglevel: this.traininglevel,
        studytype: this.studytype,
        teachingfaculty: this.teachingfaculty,
        coursename: this.coursename,
      };
      return new Promise(() => {
        queryscore(obj).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            let data = res.data.data;
            let obj = new Object();
            for (const dataKey in data) {
              let ktworkList = data[dataKey].ktwork.split("/");
              for (const ktworkListKey in ktworkList) {
                obj["value1" + (parseInt(ktworkListKey) + 1)] =
                  ktworkList[ktworkListKey];
              }
              let ktreviewList = data[dataKey].ktreview.split("/");
              for (const ktreviewListKey in ktreviewList) {
                obj["value2" + (parseInt(ktreviewListKey) + 1)] =
                  ktreviewList[ktreviewListKey];
              }
              let qzreviewList = data[dataKey].qzreview.split("/");
              for (const qzreviewListKey in qzreviewList) {
                obj["value3" + (parseInt(qzreviewListKey) + 1)] =
                  qzreviewList[qzreviewListKey];
              }
              let kzreviewList = data[dataKey].qzreview.split("/");
              for (const kzreviewListKey in kzreviewList) {
                obj["value4" + (parseInt(kzreviewListKey) + 1)] =
                  kzreviewList[kzreviewListKey];
              }
              this.tableData[dataKey] = { ...obj, ...this.tableData[dataKey] };
            }
          }
        });
      });
    }, */
      /* return new Promise(() => {
        reqCheckPlanList(obj).then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            let data = res.data.data;
            let obj = new Object();
            for (const dataKey in data) {
              let ktworkList = data[dataKey].ktwork.split("/");
              for (const ktworkListKey in ktworkList) {
                obj["value1" + (parseInt(ktworkListKey) + 1)] =
                  ktworkList[ktworkListKey];
              }
              let ktreviewList = data[dataKey].ktreview.split("/");
              for (const ktreviewListKey in ktreviewList) {
                obj["value2" + (parseInt(ktreviewListKey) + 1)] =
                  ktreviewList[ktreviewListKey];
              }
              let qzreviewList = data[dataKey].qzreview.split("/");
              for (const qzreviewListKey in qzreviewList) {
                obj["value3" + (parseInt(qzreviewListKey) + 1)] =
                  qzreviewList[qzreviewListKey];
              }
              let kzreviewList = data[dataKey].qzreview.split("/");
              for (const kzreviewListKey in kzreviewList) {
                obj["value4" + (parseInt(kzreviewListKey) + 1)] =
                  kzreviewList[kzreviewListKey];
              }
              this.tableData[dataKey] = { ...obj, ...this.tableData[dataKey] };
            }
          }
        });
      }); */
    handleCurrentChange(val) {
      this.current = val;
      this.reqCheckList();
    },
    handleSizeChange(val) {
      this.current = val;
      this.reqCheckList();
    },
    reqCheckPlan(){
      this.tableData = [];
    },
    //点击查询
    reqCheckPlanList(){
      if(this.grade == ''){
        this.tableData = [];
        this.$message({ type: "error", message: '请先选择年份！' });
        return false
      }
      this.reqCheckList();
    },
    async reqCheckList() {
      this.tableData = [];
      const result = await reqCheckPlanList(this.cc, this.current,this.grade,this.size);
      if (result.data.code == 200) {
        let data = result.data.data;
        data.records.forEach(item=>{
          if(item.trainingProgramInfo) {
            item.yearSpecialtyInfo.pyfnDetails = item.trainingProgramInfo.mc;
            item.yearSpecialtyInfo.edzxf = item.trainingProgramInfo.edzxf;
          }
          this.tableData.push(item.yearSpecialtyInfo)
        })
        this.total = data.total;
        this.current = 1;
      }
    },
    //首页表格点击单个引用
    importUser(val){
      this.importSin = val.row;
      console.log(val.row)
      this.pyfaName = val.row.pyfnDetails;
      reqUsePlan(val.row.id).then(res => {
        if(res.data.code == 200 && res.data.data){
          this.importSin == res.data.data;
        }
      });
      // console.log(this.importSin)
      this.showManualEntryDialog = true;
      return new Promise(() => {
        getConditionList(this.pageNo, this.pageSize, this.bb, this.pyfafl).then((res) => {
          if(res.data.data){
            this.pyfaList = res.data.data;
          }
        });
      });
    },
    selChangeSin(index){
      console.log(index)
      this.pyfaId = index;
    },
    //点击批量引入
    plyypyfa() {
      if(this.cc == '' && this.grade == ''){
        this.$message({ type: "error", message: '请先选择年份' });
        return false
      }
      this.$router.push({
        path: "/admin/training/batch",
      });
      localStorage.setItem('grade',this.grade);
    },
    //单个/批量引用点击保存
    submitSave(){
      let yearSpecialtyInfoList  = [];
      let obj = {
        "id":this.importSin.id,
        "pyfaid":this.pyfaId,
      }
      yearSpecialtyInfoList.push(obj);
      reqUpdatePlan(yearSpecialtyInfoList).then(res=>{
        if(res.data.code == 200){
          this.$message({ type: "success", message: res.data.msg });
          this.cancelClose();
          this.$refs.ruleForm.resetFields();
          this.reqCheckPlanList()
        }
      });
    },
    cancelClose(){
      this.showManualEntryDialog = false;
      this.$refs.ruleForm.resetFields();
    },
  }
};
</script>
<style lang="less" scoped>
.button-group {
    cursor: pointer;
    margin-top: 50px;
    text-align: center;

    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;

      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin-right: 139px;
      }

      &:nth-child(2) {
        color: #ff3819;
        border: 1px solid #ff3819;
        background: #ffefef;
      }
    }
  }
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";
.search-button {
  width: 77px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }
  > img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}
.cjrc-button {
  height: 28px;
  background: #fff6ef;
  border: 1px solid #f86900;
  border-radius: 6px;
  color: #f86900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.diaInfo{
  color: #004ca7;
  font-size: 16px;
  padding: 10px 40px;
}
.my-form-container {
    width: 1720px;
    height: 879px;
    margin: 20px auto 40px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 5px;
    .my-form-item {
      height: 65px;
      border-bottom: 1px solid rgba(0, 76, 167, 0.39);
      margin-bottom: 0;
      > div {
        display: flex;
        height: 100%;
        &:nth-child(2) {
          .my-form-item-label {
            border-left: 1px solid rgba(0, 76, 167, 0.39);
          }
        }
        .my-form-item-label{
          width: 220px;
          padding-left: 60px;
          background: rgba(0, 76, 167, 0.1);
          display: flex;
          flex: none;
          align-items: center;
          color: #004CA7;
          font-size: 16px;
          font-weight: bold;
          border-left: 1px solid rgba(0, 76, 167, 0.39);
          margin-left: -1px;
          .mustW {
            color: red;
          }
        }
      }
    }
  }
#searchLabel{
  line-height: 30px;
  color: #004ca7;
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}

.table-container5 {
  display: flex;

  .table-data:first-child {
    border-right: none !important;
    border-radius: 9px 0px 0px 9px;
  }

  .table-data:last-child {
    border-radius: 0px 9px 9px 0px;
    border-left: 1px solid #c7d7eb !important;
  }

  .table-data:not(:first-child):not(:last-child) {
    border-right: none !important;
    border-left: 0.8px solid #c7d7eb !important;
    border-radius: 0px !important;
  }

  .table-data {
    min-height: 500px;
  }
}

.table-container ::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px !important;
}

.filter-button1::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}

.filter-button1::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}

.filter-button {
  display: flex;
  margin-top: 27px;
}

.wrapper-container {
  width: 100%;
  margin: 0 auto;
}

.table-container2 {
  .table-data {
    min-height: 500px;
  }

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-container {
  margin-top: 15px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.yy {
  width: 86px;
  height: 28px;
  background: #f1fff8;
  border: 1px solid #02c86c;
  opacity: 1;
  border-radius: 6px;
  line-height: 28px;
  color: #02c86c;
}
.xq {
    height: 28px;
    background: none;
    opacity: 1;
    color: #004ca7;
    padding: 5px 5px;
    line-height: 5px;
    border: none;
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>